<template>
    <div class="statistics-staff-detail-page">
        <el-card shadow="never" v-loading="loading">
            <div class="title-content">
                <div class="title flex items-center">
                    <div class="font-semibold mr-4">{{ years.split('/')[0] }}年</div>
                    <div class="flex justify-center items-center">
                        <i @click="dateChange('pre')" class="el-icon-arrow-left mr-2 cursor-pointer"></i>
                        <span class="text-blue-500 w-12 text-center font-semibold">
                            {{ +years.split('/')[1] }}月
                        </span>
                        <i @click="dateChange('next')" class="el-icon-arrow-right ml-2 cursor-pointer"></i>
                    </div>
                    <div class="mx-4 text-gray-800">{{ title }}</div>
                    <div class="text-xs text-gray-500">
                        {{ form.course_num }}个内容，涉及{{ form.label_num }}个主题
                    </div>
                </div>
            </div>
            <div class="mt-4">
                <el-table :data="data" v-if="type === 'learned'">
                    <el-table-column align="center" label="序号" type="index"/>
                    <el-table-column align="center" label="本月该课程首次学习时间" prop="start_learn_at"/>
                    <el-table-column align="center" label="最长单次时长" prop="longest_single_duration"/>
                    <el-table-column align="center" label="学习节点标题-主题" prop="content"/>
                </el-table>
                <el-table :data="data" v-else>
                    <el-table-column align="center" label="序号" type="index"/>
                    <el-table-column align="center" v-if="type === 'node'" label="完成时间" prop="complete_at"/>
                    <el-table-column align="center" v-else label="学习时间" prop="time"/>
                    <el-table-column
                        align="center"
                        :label="type === 'thinkTopic' || type === 'selfEvaluation' ? '主题' : '学习节点标题-主题'"
                        prop="content"/>
                </el-table>
            </div>
            <div v-if="totalElements > 0" class="footer flex justify-end items-center">
            </div>
        </el-card>
        <div class="text-center mt-4">
            <el-button @click="$router.back()">返 回</el-button>
        </div>
    </div>
</template>

<script>
import TimeFormats from '@/helpers/TimeFormats';

export default {
    components: {
    },
    data() {
        return {
            version: 'v1', // 版本 v1 v2

            id: '',
            type: '',
            timestamp: '',
            loading: false,
            data: [],
            form: {
                course_num: 0,
                label_num: 0,
                records: [],
                responses: [],
            },
            totalElements: 0,
            years: '2021/1/1',
        };
    },
    computed: {
        title() {
            let title = '';
            switch (this.type) {
                case 'node':
                    title = '完成的学习节点';
                    break;
                case 'learned':
                    title = '学习了这些';
                    break;
                case 'thinkTopic':
                    title = '做了这些工作场景的思考题';
                    break;
                case 'selfEvaluation':
                    title = '做了这些工作场景的自评';
                    break;
                default:
                    break;
            }
            return title;
        },
    },
    filters: {
        timeFormat(time) {
            if (!time) return '';
            return new TimeFormats().convertTime('YYYY-MM-DD hh:mm', time);
        },
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get(`statistics/user/use-record/${this.type}/${this.timestamp}/${this.id}`).then((res) => {
                this.form = res;
                this.data = res.responses || res.records || [];
            }).finally(() => {
                this.loading = false;
            });
        },
        // 切换月份
        dateChange(e) {
            const years = this.years.split('/');

            let year = +years[0];
            let month = +years[1];
            const day = +years[2];
            if (e === 'pre') {
                if (this.version === 'v2' && year <= 2021 && month <= 6) {
                    $ele.$message.warning('数据分析模块3.0版，统计起始时间 2021年6月1日');
                    return;
                }

                if (month === 1) {
                    month = 12;
                    year -= 1;
                } else month--;
            } else {
                if (this.version === 'v1' && year >= 2021 && month >= 5) {
                    $ele.$message.warning('查看新版本数据，请使用3.0版');
                    return;
                }

                if (month === 12) {
                    month = 1;
                    year += 1;
                } else month++;
            }

            if (month < 10) month = `0${month}`;
            this.years = `${year}/${month}/${day}`;
            this.timestamp = new Date(`${year}/${month}/${day}`).getTime();
            this.fetchData();
        },
    },
    mounted() {
        const id = this.$route.params.id || '';
        this.version = this.$route.params.v || 'v1';
        const { type, timestamp } = this.$route.query;

        if (id && type && timestamp) {
            this.id = id;
            this.type = type;
            this.timestamp = timestamp;

            const time = new Date(+timestamp);
            this.years = `${time.getFullYear()}/${time.getMonth() + 1}/1`;

            this.fetchData();
        }
    },
};
</script>

<style lang="scss">
.statistics-staff-detail-page {
    .footer {
        height: 44px;
        background: #f7f7f7;
        padding-left: 20px;
        padding-right: 20px;
    }
}
</style>
